<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" 
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title th:text="${title} + ' - 智能营养管理系统'">错误 - 智能营养管理系统</title>
</head>
<body>
    <div layout:fragment="content">
        <div class="container mt-5">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6">
                    <div class="card">
                        <div class="card-body text-center py-5">
                            <!-- 错误图标 -->
                            <div class="mb-4">
                                <i class="fas fa-exclamation-triangle text-warning" style="font-size: 4rem;"></i>
                            </div>
                            
                            <!-- 错误标题 -->
                            <h1 class="display-6 fw-bold text-dark mb-3" th:text="${title}">发生错误</h1>
                            
                            <!-- 状态码 -->
                            <div th:if="${statusCode}" class="mb-3">
                                <span class="badge bg-danger fs-6" th:text="'错误代码: ' + ${statusCode}">错误代码</span>
                            </div>
                            
                            <!-- 错误描述 -->
                            <p class="text-muted mb-4" th:text="${description}">抱歉，发生了一个意外错误。</p>
                            
                            <!-- 请求路径 -->
                            <div th:if="${requestUri}" class="mb-4">
                                <small class="text-muted">
                                    请求路径: <code th:text="${requestUri}"></code>
                                </small>
                            </div>
                            
                            <!-- 操作按钮 -->
                            <div class="d-flex justify-content-center gap-3">
                                <a href="javascript:history.back()" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-2"></i>返回上页
                                </a>
                                <a th:href="@{/}" class="btn btn-primary">
                                    <i class="fas fa-home me-2"></i>返回首页
                                </a>
                            </div>
                            
                            <!-- 常用链接 -->
                            <div class="mt-4">
                                <h6 class="text-muted mb-3">您可能想要访问：</h6>
                                <div class="d-flex justify-content-center gap-2 flex-wrap">
                                    <a th:href="@{/meals}" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-utensils me-1"></i>智能点餐
                                    </a>
                                    <a th:href="@{/nutrition/dashboard}" class="btn btn-outline-success btn-sm">
                                        <i class="fas fa-chart-line me-1"></i>营养仪表盘
                                    </a>
                                    <a th:href="@{/alerts}" class="btn btn-outline-warning btn-sm">
                                        <i class="fas fa-bell me-1"></i>预警中心
                                    </a>
                                    <a th:href="@{/profile}" class="btn btn-outline-info btn-sm">
                                        <i class="fas fa-user me-1"></i>个人中心
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 帮助信息 -->
                    <div class="text-center mt-4">
                        <p class="text-muted small">
                            如果问题持续存在，请联系系统管理员或
                            <a th:href="@{/help}" class="text-decoration-none">查看帮助文档</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="page-scripts">
        <script>
            // 自动刷新功能（可选）
            function autoRefresh() {
                if (confirm('是否要重新加载页面？')) {
                    window.location.reload();
                }
            }
            
            // 5秒后显示刷新提示（仅对5xx错误）
            const statusCode = /*[[${statusCode}]]*/ null;
            if (statusCode && statusCode >= 500) {
                setTimeout(() => {
                    const refreshBtn = document.createElement('button');
                    refreshBtn.className = 'btn btn-outline-primary btn-sm mt-3';
                    refreshBtn.innerHTML = '<i class="fas fa-sync-alt me-1"></i>重新加载';
                    refreshBtn.onclick = autoRefresh;
                    
                    const buttonContainer = document.querySelector('.d-flex.justify-content-center.gap-3');
                    if (buttonContainer) {
                        buttonContainer.appendChild(refreshBtn);
                    }
                }, 5000);
            }
        </script>
    </th:block>
</body>
</html>
